<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tree菜单</title>
    <style>
        [v-cloak]{display: none}
    </style>
</head>
<body>

<div id="app" v-cloak>
    <h1>{{title}}</h1>

    <ul>
        <li>Java
            <ul>
                <li>
                    Spring
                    <ul>
                        <li>SpringMvc</li>
                        <li>SpringBoot</li>
                    </ul>
                </li>
                <li>
                    Mybatis
                    <ul>
                        <li>MybatisPlus</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Phtyon</li>
        <li>Go</li>
        <li>
            JS
            <ul>
                <li>nodejs</li>
            </ul>
        </li>
    </ul>
</div>


<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>

    var vue = new Vue({
        el:"#app",
        data:{
            title:"学相伴基于vue的Tree菜单",
            dataList:[]
        },
        created:function(){
            // 1： 页面加载初始化执行获取数组
            this.loadTree();
        },
        methods:{
            // 加载tree的数据信息
            loadTree:function(){
                axios.get("/api/category/tree").then(res => {
                    this.dataList = res.data;
                })
            }
        }
    })


</script>


</body>
</html>